import { defineComponent, onMounted, reactive, ref } from "vue";
import styles from "./bussinessScope.module.less";
import { CheckOutlined } from "@ant-design/icons-vue";
import dayjs from "dayjs";
export default defineComponent({

  setup() {
    const state = reactive({
      last_day: '',  //最后一天
      days: '',    //剩余天数
      form: {
        type: '',
        insurance_start_date: '',
        during_start: '', //营业执照
        during_end: '',
        is_indefinitely: false,
      },
      total_expense: '' || '--',
      payment_options: '',
      select: {
        emergency_rescue: '',
        travel_delay: '',
        travel_cancellation_losses: '',
        expansion_costs: '',
        consolation_money: '',
      }
    } as any)

    //获取时间
    const getDate = () => {
      let nowTime = new Date();
      let YYYY = nowTime.getFullYear();
      state.last_day = YYYY + '-' + '12' + '-' + '31';
      state.form.insurance_start_date = dayjs().format();
      state.days = Math.ceil(Math.abs(new Date(state.last_day).getTime() - new Date(state.form.insurance_start_date).getTime()) / (24 * 60 * 60 * 1000));
    }


    //附加险列表
    //紧急救援费用保险
    const emergencyRescues = ref([
      {
        label: '100万',
        value: 0,
      },
      {
        label: '200万',
        value: 1,
      },
      {
        label: '400万',
        value: 2,
      },
      {
        label: '1000万',
        value: 3,
      },
    ])
    //旅行延误保险
    const travelDelays = ref([
      {
        label: '10万',
        value: 0,
      },
      {
        label: '20万',
        value: 1,
      },
      {
        label: '50万',
        value: 2,
      },
      {
        label: '100万',
        value: 3,
      },
    ])
    //旅行取消损失保险
    const travelCancellationLossess = ref([
      {
        label: '10万',
        value: 0,
      },
      {
        label: '20万',
        value: 1,
      },
      {
        label: '50万',
        value: 2,
      },
      {
        label: '100万',
        value: 3,
      },
    ])
    //扩展费用保障保险
    const expansionCostss = ref([
      {
        label: '20万',
        value: 0,
      },
      {
        label: '50万',
        value: 1,
      },
      {
        label: '100万',
        value: 2,
      },
      {
        label: '200万',
        value: 3,
      },
    ])
    //抚慰金附加保险
    const consolationMoneys = ref([
      {
        label: '10万',
        value: 0,
      },
      {
        label: '20万',
        value: 1,
      },
      {
        label: '30万',
        value: 2,
      },
      {
        label: '50万',
        value: 3,
      },
    ]);

    //天数
    const during_date = () => {
      state.days = Math.ceil(Math.abs(new Date(state.last_day).getTime() - new Date(state.form.insurance_start_date).getTime()) / (24 * 60 * 60 * 1000));
    }

    //确认
    const confirm = () => {

    }

    onMounted(() => {
      getDate()
    })

    return () => (
      <div class={styles.bussinessScope}>
        <div class={styles['header-box']}>经营资质变更</div>
        <div class={styles.container}>
          <div class={styles['form-box']}>
            <a-form model={state.form} label-col={{ style: { lineHeight: '40px' } }} style={{ width: '100%' }}>
              <a-form-item
                label="经营范围"
                name="type"
                required
              >
                <div class={styles['form-item-content']}>
                  <span>由国内游/入境游 变为</span>
                  <span class={styles.active}>国内游/入境游/出境游</span>
                </div>
              </a-form-item>
              <a-form-item
                label="保险起止日期"
                name="insurance_start_date"
                required
              >
                <a-date-picker v-model:value={state.form.insurance_start_date} style={{ width: '220px', height: '40px' }} valueFormat="YYYY-MM-DD" change={during_date()} />
                <span>- {state.last_day}共<span class={styles.days}>{state.days}</span>天</span>
              </a-form-item>
              <div class={styles.tips}>
                <p>当天<span>0</span>时起</p>
                <p>当天<span>23:59:59</span>时止</p>
              </div>
              <a-form-item
                label="营业执照"
                required
              >
                <a-date-picker v-model:value={state.form.during_start} style={{ width: '200px', height: '40px' }} />
                <span style={{ margin: '0 3px' }}>至</span>
                <a-date-picker v-model:value={state.form.during_end} style={{ width: '200px', height: '40px' }} placeholder='截至日期' />
                <a-checkbox style={{ marginLeft: '5px' }} v-model:checked={state.form.is_indefinitely}>无期限</a-checkbox>
              </a-form-item>
            </a-form>
          </div>
          <div class={styles['basic-insurance-box']}>
            <div class={styles['basic-insurance-title']}>基本险：</div>
            <a-form label-col={{ style: { lineHeight: '40px' } }} style={{ width: '100%' }}>
              <a-form-item
                label="每次事故责任限额及累计责任限额"
                required
              >
                <span class={styles.active}>重新选择</span>
              </a-form-item>
              <a-form-item
                label="每次事故每人人身伤亡责任限额"
                required
              >
                <span class={styles.active}>重新选择</span>
              </a-form-item>
            </a-form>
          </div>
          <div class={styles['additional-risk']}>
            <div class={styles['additional-risk-title']}>附加险（可选）：</div>
            <div class={styles['additional-risk-list']}>
              <div class={styles['additional-risk-item']}>
                <div class={styles['item-label']}>紧急救援费用保险:</div>
                <div class={styles['select-list']}>
                  {
                    emergencyRescues.value.map((itemE: any) => (
                      <div class={[styles['select-item'], itemE.value === state.select.emergency_rescue && styles.actived]}
                        onClick={() => { state.select.emergency_rescue = state.select.emergency_rescue === itemE.value ? "" : itemE.value }}
                      >
                        {itemE.label}
                        {
                          state.select.emergency_rescue === itemE.value ? <div>
                            <div class={styles['icon-checks']}></div>
                            <CheckOutlined class={styles['actived-icon']} />
                          </div> : ''
                        }
                      </div>
                    ))
                  }
                </div>
              </div>
              <div class={styles['additional-risk-item']}>
                <div class={styles['item-label']}>旅行延误保险:</div>
                <div class={styles['select-list']}>
                  {
                    travelDelays.value.map((itemT: any) => (
                      <div class={[styles['select-item'], itemT.value === state.select.travel_delay && styles.actived]}
                        onClick={() => { state.select.travel_delay = state.select.travel_delay === itemT.value ? "" : itemT.value }}
                      >
                        {itemT.label}
                        {
                          state.select.travel_delay === itemT.value ? <div>
                            <div class={styles['icon-checks']}></div>
                            <CheckOutlined class={styles['actived-icon']} />
                          </div> : ''
                        }
                      </div>
                    ))
                  }
                </div>
              </div>
              <div class={styles['additional-risk-item']}>
                <div class={styles['item-label']}>旅行取消损失保险:</div>
                <div class={styles['select-list']}>
                  {
                    travelCancellationLossess.value.map((itemT: any) => (
                      <div class={[styles['select-item'], itemT.value === state.select.travel_cancellation_losses && styles.actived]}
                        onClick={() => { state.select.travel_cancellation_losses = state.select.travel_cancellation_losses === itemT.value ? "" : itemT.value }}
                      >
                        {itemT.label}
                        {
                          state.select.travel_cancellation_losses === itemT.value ? <div>
                            <div class={styles['icon-checks']}></div>
                            <CheckOutlined class={styles['actived-icon']} />
                          </div> : ''
                        }
                      </div>
                    ))
                  }
                </div>
              </div>
              <div class={styles['additional-risk-item']}>
                <div class={styles['item-label']}>扩展费用保障保险:</div>
                <div class={styles['select-list']}>
                  {
                    expansionCostss.value.map((itemT: any) => (
                      <div class={[styles['select-item'], itemT.value === state.select.expansion_costs && styles.actived]}
                        onClick={() => { state.select.expansion_costs = state.select.expansion_costs === itemT.value ? "" : itemT.value }}
                      >
                        {itemT.label}
                        {
                          state.select.expansion_costs === itemT.value ? <div>
                            <div class={styles['icon-checks']}></div>
                            <CheckOutlined class={styles['actived-icon']} />
                          </div> : ''
                        }
                      </div>
                    ))
                  }
                </div>
              </div>
              <div class={styles['additional-risk-item']}>
                <div class={styles['item-label']}>抚慰金附加保险:</div>
                <div class={styles['select-list']}>
                  {
                    consolationMoneys.value.map((itemT: any) => (
                      <div class={[styles['select-item'], itemT.value === state.select.consolation_money && styles.actived]}
                        onClick={() => { state.select.consolation_money = state.select.consolation_money === itemT.value ? "" : itemT.value }}
                      >
                        {itemT.label}
                        {
                          state.select.consolation_money === itemT.value ? <div>
                            <div class={styles['icon-checks']}></div>
                            <CheckOutlined class={styles['actived-icon']} />
                          </div> : ''
                        }
                      </div>
                    ))
                  }
                </div>
              </div>
            </div>
          </div>
          <div class={styles['total-expense']}>
            <span>保费合计：<span class={styles['price-amount']}>￥{state.total_expense}</span>元</span>
          </div>
          <div class={styles.footer}>
            <div class={styles.btn} onClick={() => { confirm() }}>确认</div>
          </div>
        </div>
      </div>
    )
  }
})